import classNames from 'classnames';
import * as React from 'react';

export interface FlexItemProps {
    prefixCls?: string;
    className?: string;
    style?: React.CSSProperties;
    flexBasic?: number | string | "auto" | "fill";
    overflow?: "auto" | "hidden"
}

const FlexItem: React.FunctionComponent<FlexItemProps> = (props) => {
    const {
        children, className, prefixCls, style,
        flexBasic, overflow, ...restProps
    } = props;

    let cssStyle = {
    };

    if (flexBasic !== "auto" && flexBasic !== "fill") {
        cssStyle = {
            ...cssStyle,
            flexBasis: flexBasic
        };
    }

    if(style){
        cssStyle = {
            ...cssStyle,
            ...style
        };
    }

    const wrapCls = classNames(`${prefixCls}-item`, className, {
        [`${prefixCls}-item-auto`]: flexBasic === "auto",
        [`${prefixCls}-item-fill`]: flexBasic === "fill",
        [`${prefixCls}-item-fixed`]: flexBasic !== "auto" && flexBasic !== "fill",
        [`${prefixCls}-item-overflow-auto`]: overflow === "auto",
        [`${prefixCls}-item-overflow-hidden`]: overflow === "hidden"
    });

    return (
        <div className={wrapCls} style={cssStyle} {...restProps}>
            {children}
        </div>
    );
};

FlexItem.defaultProps = {
    prefixCls: 'mousex-flex',
    flexBasic: "fill",
    overflow: "auto",
};

export default FlexItem;